import {JSX, lazy, Suspense} from "react";

// const Home = lazy(() => import('../views/Home'))
const Index = lazy(() => import('../views/index'))
const About = lazy(() => import('../views/About'))
const Xtgl = lazy(() => import('../views/Xtgl'))
const Role = lazy(() => import('../views/Role'))
const NoPage = lazy(() => import('../views/404'))
import Login from '../views/login/index'
import Home from '../views/Home'
import { Navigate} from "react-router-dom"
//
//
// const BasicRoute = () => (
//     <BrowserRouter>
//         <Routes>
//             <Route path='/' element={<App/>}>
//                 <Route  path="/" element={<Navigate to='/home'/>}/>
//                 <Route  path="/home" element={<Home/>}/>
//                 <Route  path="/about" element={<About/>}/>
//             </Route>
//         </Routes>
//     </BrowserRouter>
// );
//
//
// export default BasicRoute;
// 处理lazy加载页面显示空白问题

const withLoading = (tag: JSX.Element) => (
    <Suspense fallback={<div>Loading...</div>}>
        {tag}
    </Suspense>
)
const routers = [
    {
        path: '/',
        element: <Navigate to='/login'/>
    }, {
        path: '/',
        element: <Home/>,
        children: [
            {
                path: '/index',
                element: withLoading(<Index/>)
            }, {
                path: '/about',
                element: withLoading(<About/>)
            }, {
                path: '/xtgl',
                element: withLoading(<Xtgl/>)

            },
            {
                path: '/role',
                element: withLoading(<Role/>)
            }
        ]
    },{
    path:'/login',
        element: <Login/>
    }, {
        path: '*',
        element: <NoPage/>
    }
    // {
    //     path: '/home',
    //     element: withLoading(<Home/>)
    // }, {
    //     path: '/about',
    //     element: withLoading(<About/>)
    // }
]

export default routers
